<template>
	<div class="disColumnCenter login-container">
		<div class="login-wave">
			<svg class="editorial" viewBox="0 24 150 28" preserveAspectRatio="none">
				<defs>
					<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s  58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
				</defs>
				<g class="parallax">
					<use xlink:href="#gentle-wave" x="50" y="0" fill="#ffffff"></use>
					<use xlink:href="#gentle-wave" x="50" y="3" fill="#ffffff" />
					<use xlink:href="#gentle-wave" x="50" y="6" fill="#ffffff" />
				</g>
			</svg>
		</div>
		<div class="loginMain">
			<div class="loginLeft">
				<img src="@/assets/images/login/loginBg.svg" alt="loginBg" class="bg" />
				<div class="floatContent">
					<img class="logo" src="@/assets/images/logo.png" alt="logo" />
					<p class="abbreviation">体趣</p>
					<p class="fullName">体育赛事管理平台</p>
					<p class="englishName">Sports event management platform</p>
				</div>
			</div>
			<div class="loginRight">
				<div class="login-title">用户登录 <span>USER LOGIN</span></div>
				<el-form :model="param" ref="formRef">
					<el-form-item
						prop="username"
						:rules="{
							required: true,
							message: '账号不能为空',
							trigger: ['blur', 'change']
						}"
					>
						<User class="tipsIcon" />
						<el-input placeholder="请输入账号" style="height: 40px" v-model="param.username" />
					</el-form-item>
					<el-form-item
						prop="password"
						:rules="{
							required: true,
							message: '密码不能为空',
							trigger: ['blur', 'change']
						}"
					>
						<Lock class="tipsIcon" />
						<el-input
							placeholder="请输入密码"
							style="height: 40px"
							v-model="param.password"
							:type="isPassword ? '' : 'password'"
						/>
						<Hide class="tipsIcon tipsIcon-rt" v-if="!isPassword" @click="showPwd(isPassword)" />
						<View class="tipsIcon tipsIcon-rt" v-else @click="showPwd(isPassword)" />
					</el-form-item>
					<el-form-item prop="codeImage" :rules="{ required: true, message: '验证码不能为空', trigger: 'blur' }">
						<div class="disBet" style="width: 100%">
							<Cellphone class="tipsIcon" />
							<el-input
								placeholder="请输入验证码"
								style="height: 40px; margin-right: 10px"
								maxlength="4"
								v-model="param.codeImage"
								@input="submitForm(formRef)"
							/>
							<imageCode :change="data.change_img_code" @click="changeImageCode" @get-code="backImageCode" />
						</div>
					</el-form-item>
					<!-- <div class="disBet" style="margin-top: 30px;">
                        <el-checkbox v-model="checked">记住密码</el-checkbox>
                        <el-tooltip content="<div>请联系客服重置登录密码</div><div>电话：400-888-88888</div>" raw-content
                            placement="top">
                            <el-link type="primary">忘记密码</el-link>
                        </el-tooltip>
                    </div> -->
					<el-form-item>
						<el-button class="loginBtn" @click="submitForm(formRef)" v-if="!loginLoading" type="primary">登录</el-button>
						<el-button v-else class="loginBtn" type="primary" loading></el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>

		<div class="loginFooter">
			Copyright © www.sport.uldsoft.com/, All Rights Reserved.
			<br />专业的体育赛事服务平台
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElNotification } from "element-plus";
import type { FormInstance } from "element-plus";
import { Lock, User } from "@element-plus/icons-vue";
import { getTimeState } from "@/utils/util";
import { GlobalStore } from "@/stores";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
import { TabsStore } from "@/stores/modules/tabs";
import { KeepAliveStore } from "@/stores/modules/keepAlive";
import userInfoApi from "@/api/modules/userInfo";
import { HOME_URL } from "@/config/config";
import imageCode from "@/components/CodeImage/index.vue";
import md5 from "js-md5";
const router = useRouter();
const globalStore = GlobalStore();
const tabsStore = TabsStore();
const keepAlive = KeepAliveStore();
// 图形验证码
const data = reactive({
	change_img_code: false, // 刷新验证码
	img_code: "" // 加密后的验证码值
});

// 刷新验证码操作
const changeImageCode = () => {
	data.change_img_code = !data.change_img_code;
};
// 接收组件返回加密后的验证码值
const backImageCode = (code: any) => {
	data.img_code = code;
};
const formRef = ref<any>(null);
interface LoginInfo {
	username: string;
	password: string;
	codeImage: string;
}
const param = reactive<LoginInfo>({
	username: "",
	password: "",
	codeImage: ""
});
const isPassword = ref<boolean>(false);
const showPwd = (bool: boolean) => {
	isPassword.value = !bool;
};
const loginLoading = ref<boolean>(false);
// const changeLogin = (): void => {
// 	if (md5(param.codeImage) != data.img_code) {
// 		ElMessage.error("验证码错误！");
// 		return;
// 	}
// };
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async (valid: boolean) => {
		if (!valid) return;
		if (param.codeImage.length !== 4) return;
		if (md5(param.codeImage) != data.img_code) {
			ElMessage.closeAll();
			ElMessage.error("验证码错误！");
			return;
		}
		try {
			let request = {
				LoginName: param.username,
				PassWord: md5(param.password).toUpperCase()
			};
			loginLoading.value = true;
			// 1.执行登录请求
			let { result } = await userInfoApi.GetLoginUserInfo(request);
			let { code, message, data } = result;
			if (code != 200) {
				ElMessage.error(message);
				loginLoading.value = false;
				return;
			}
			let bool = !!data.companyInfo;

			globalStore.setUserToken(data.token);
			globalStore.setToken("Bearer " + data.token);
			globalStore.setIsPlatform(bool);
			globalStore.setUserInfo(data);

			// 2.添加动态路由
			await initDynamicRouter();

			// 3.清空 tabs、keepAlive 保留的数据
			tabsStore.closeMultipleTab();
			keepAlive.setKeepAliveName();
			// 4.跳转到首页
			router.push(HOME_URL);
			ElNotification({
				title: getTimeState(data.userName),
				message: "欢迎登录 体趣赛事管理平台",
				type: "success",
				duration: 3000
			});
		} finally {
			loginLoading.value = false;
		}
	});
};
onMounted(() => {
	// 监听enter事件（调用登录）
	document.onkeydown = (e: any) => {
		e = window.event || e;
		if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
			if (loginLoading.value) return;
			submitForm(formRef.value);
		}
	};
});
</script>

<style lang="scss">
.login-container {
	.loginRight {
		.el-form {
			margin-top: 40px;
		}
		.el-form-item {
			margin-top: 30px;
		}
		.el-input__inner {
			padding-left: 36px;
		}
	}
}
</style>

<style lang="scss" scoped>
// 波浪
.example-showcase .el-loading-mask {
	z-index: 9 !important;
}
.login-wave {
	position: fixed;
	top: 40vh;
	left: 0;
	width: 100%;
	height: 60vh;
	background: #ffffff;
	.editorial {
		display: block;
		width: 100%;
		height: 100px;
		margin: 0;
		margin-top: -100px;
	}
	.parallax > use {
		animation: move-forever 12s linear infinite;
	}
	.parallax > use:nth-child(1) {
		opacity: 0.4;
		animation-delay: -2s;
	}
	.parallax > use:nth-child(2) {
		opacity: 0.6;
		animation-duration: 5s;
		animation-delay: -2s;
	}
	.parallax > use:nth-child(3) {
		animation-duration: 3s;
		animation-delay: -4s;
	}

	@keyframes move-forever {
		0% {
			transform: translate(-90px, 0%);
		}
		100% {
			transform: translate(85px, 0%);
		}
	}

	@media (max-width: 50em) {
		.content h1 {
			font-size: 12vmax;
		}
		.editorial {
			height: 17vw;
		}
	}
}

// 主体
.login-container {
	position: relative;

	// background-image: linear-gradient(to right, #1962d0, #535dc3, #6d5ab5, #7e57a8, #88569b);
	min-height: 100vh;
	background: rgb(96 105 254);
	background-image: linear-gradient(to right, rgb(119 88 253), rgb(29 146 255));
	.loginMain {
		position: relative;
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 9;
		display: flex;
		width: 800px;
		height: auto;
		margin: auto;
		overflow: hidden;
		background: #ffffff;
		border-radius: 10px;

		// height: 840px;
		box-shadow: 0 0 10px 0 #999999;
		transform: translate(-50%, -50%);
		.loginLeft {
			// float: left;
			// width: 330px;
			// position: relative;
			display: flex;
			.bg {
				position: absolute;
				top: 0;
				left: 0;
			}
			.floatContent {
				// position: absolute;
				// top: 0;
				// left: 0;
				width: 330px;
				height: 540px;
				overflow: hidden;
				font-size: 22px;
				font-weight: bold;
				color: #666666;
				text-align: center;
				p {
					margin: 0;
				}
				.logo {
					width: 80px;
					margin-top: 30px;
				}
				.fullName {
					margin-top: 32px;
				}
				.englishName {
					margin-top: 8px;
					font-size: 16px;
				}
			}
		}
		.loginRight {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			// float: right;
			width: 470px;
			padding: 40px;
			font-weight: bold;
			color: #666666;
			.login-title {
				font-size: 22px;
				span {
					padding-left: 10px;
					font-size: 16px;
					font-weight: normal;
					color: #999999;
				}
			}
			.tipsIcon {
				position: absolute;
				top: 0;
				left: 15px;
				z-index: 1;
				width: 20px;
				height: 46px;
			}
			.tipsIcon-rt {
				right: 15px;
				left: inherit;
				width: 16px;
				cursor: pointer;
			}
		}
	}
	.loginFooter {
		position: absolute;
		bottom: 50px;
		left: 50%;
		z-index: 9;
		width: 800px;
		margin: auto;
		color: #888888;
		text-align: center;
		transform: translateX(-50%);
	}
	.loginCodeBox {
		float: right;
		height: 50px;
		border-radius: 4px;
	}
	.code-box {
		width: 180px;
		height: 46px;
		margin-left: 10px;
		background: #dddddd;
		border-radius: 3px;
	}
	.loginBtn {
		width: 100%;
		height: 50px;
		font-size: 18px;
		font-weight: bold;
	}
}
.disBet {
	display: flex;
}
</style>
